import React from 'react';
import {TouchableOpacity, View, StyleSheet} from 'react-native';
import {BasicText} from '../../kit/text';
import {normalize} from '../../utils/adapter';
import Avatar from '../../kit/avatar';
import {MoreIcon} from '../../kit/icon';

function Section(): JSX.Element {
  return (
    <View style={styles.section_view}>
      <View style={styles.main_view}>
        <View style={styles.item_view}>
          <BasicText color="#333333" fontWeight={'bold'}>
            头像
          </BasicText>
          <TouchableOpacity style={styles.item_right_view}>
            <Avatar
              width={45}
              height={45}
              uri={require('../../assets/images/avatar.jpg')}
            />
            <MoreIcon size="14" fill="#999999" />
          </TouchableOpacity>
        </View>
        <View style={styles.item_view}>
          <BasicText color="#333333" fontWeight={'bold'}>
            昵称
          </BasicText>
          <TouchableOpacity style={styles.item_right_view}>
            <BasicText fontSize={normalize(14)} color="#333" fontWeight={'500'}>
              蓝月亮#
            </BasicText>
            <MoreIcon size="14" fill="#999999" />
          </TouchableOpacity>
        </View>
        <View style={styles.item_view}>
          <BasicText color="#333333" fontWeight={'bold'}>
            绑定手机号
          </BasicText>
          <TouchableOpacity style={styles.item_right_view}>
            <BasicText fontSize={normalize(14)} color="#333" fontWeight={'500'}>
              未绑定
            </BasicText>
            <MoreIcon size="14" fill="#999999" />
          </TouchableOpacity>
        </View>
        <View style={[styles.item_view,styles.item_last_view]}>
          <BasicText color="#333333" fontWeight={'bold'}>
            我的邀请码
          </BasicText>
          <TouchableOpacity style={styles.item_right_view}>
            <BasicText fontSize={normalize(14)} color="#333" fontWeight={'500'}>
              1378124383
            </BasicText>
            <MoreIcon size="14" fill="#999999" />
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  section_view: {
    height: 300,
    paddingHorizontal: normalize(12),
    paddingVertical: normalize(12),
  },
  main_view: {
    backgroundColor: '#fff',
    paddingHorizontal: normalize(8),
    paddingVertical: normalize(8),
    borderRadius: normalize(8),
  },
  item_view: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: normalize(12),
    borderBottomWidth: normalize(0.5),
    borderBottomColor: '#CCCCCC',
    borderStyle: 'solid',
  },
  item_last_view:{
    borderBottomWidth:normalize(0),
  },
  item_right_view: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
});

export default Section;
